<template>
	<view class="content">
		<image class="bg-set" src="../../static/global-bg.jpg" mode="widthFix"></image>
		<view class="loader">
		</view>
		<view class="logoimg">
				<image class="logo" src="../../static/logo.png"></image>
		</view>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<input  type="text"   placeholder="请输入用户名" class="inputAcc" v-model="username" />
		<input type="password" placeholder="请输入密码" class="input" v-model="password" />
		<input type="password" placeholder="请再次确认密码" class="inputAgain" v-model="password2" />
		<button  class="loginBtn" @click="register">
			注册
		</button>
		<tip-modal
			title="提示" 
			:content="tipContent" 
			:modalName="modalName" 
			@hideModal="hideModal"
		></tip-modal>
	</view>
</template>
<script>
	import TipModal from '@/components/TipModal.vue'
	import {registerApi} from '@/api/user.js'
	import {mapState} from 'vuex'
	export default {
		components: {
			TipModal
		},
		data() {
			return {
				title: '和小物一起进入奇妙的心灵之旅',
				password: '',
				password2: '',
				username: '',
				modalName: '',
				tipContent: ''
			}
		},
		methods: {
		  register () {
				const password = this.password
				const password2 = this.password2
				const username = this.username.trim()
				if(password === '' || username === '') {
					this.tipContent = '请输入用户名和密码'
					this.modalName = 'Modal'
					return
				}
				if (password !== password2) {
					this.tipContent = '再次确认密码有误'
					this.modalName = 'Modal'
					return
				} 
				const info = {username, password}
				registerApi(info).then(res => {
					if (res.code !== 200) {
						this.tipContent = res.message
						this.modalName = 'Modal'
					} else {
						const userInfo = {
							userid: res.data,
							username: info.username
						}
						this.$store.commit('setUserInfo', userInfo);
						uni.navigateTo({
							url: '/pages/guide/index'
						})
					}
				})
			},
			hideModal () {
				this.modalName = ''
			},
			gotoRegister () {
				uni.navigateTo({
					url: '/pages/register/index'
				})
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	page{
			background-color: #fff;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.input{
		margin: 20% 0rem;
		position: absolute;
		top:500rpx;
		height:70upx;
		width: 50%;
		color: #fff;
		text-align: center;
		border-bottom: 1px $theme-color solid;
		border-radius: 10upx;
	 }
	.inputAcc{
		margin: 20% 0rem;
	  position: absolute;
		top:370rpx;
		height:70upx;
		width: 50%;
		color: #fff;
		text-align: center;
		border-bottom: 1px $theme-color solid;
		border-radius: 10upx;
	}
	.inputAgain{
		margin: 20% 0rem;
	  position: absolute;
		top:630rpx;
		height:70upx;
		width: 50%;
		color: #fff;
		text-align: center;
		border-bottom: 1px $theme-color solid;
		border-radius: 10upx;
	}
	.loginBtn{
		background: linear-gradient(to right, #ffe7ba, $theme-color);
		border-radius: 200rpx;
		width: 200rpx;
		position: absolute;
		color: white;
		bottom:150rpx;
	}
	.logoimg{
		position: absolute;
		top:155rpx;
		z-index:10;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;	
    border-radius: 100upx;
	}
	.text-area {
		position: absolute;
		top:430rpx;
		display: flex;
		justify-content: center;
	}
	.title {
		font-size: 25rpx;
		color: #8f8f94;
	}
	.loader {
		z-index:1;
		position: absolute;
		top:130rpx;
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
		animation: animate 1.2s linear infinite;
	}
	@keyframes animate {
		0% {
				transform: rotate(0deg);
		}
		100% {
				transform: rotate(360deg);
		}
	}
	.loader:after {
		content: '';
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		background: #f1f1f1;
		border: solid white 10px;
		border-radius: 50%;
	}
	.registerBtn {
		position: absolute;
		bottom: 150px;
		color: #8f8f8f;
		font-size: $uni-font-size-sm;
		text-decoration: underline;
	}
</style>
